<template>
    <div class="newsCard" @click="goDetail()">
        <div class="left">
            <span class="day">{{ detail.time | momentFormat('DD') }}</span>
            <span class="date">{{ detail.time | momentFormat('YYYY.MM') }}</span>
        </div>
        <div class="right">
            <span class="tit">{{ detail.title }}</span>
            <span class="dec">{{ detail.dec }}</span>
        </div>
    </div>
</template>

<script>
export default {
    name: 'NewsCard',
    props: {
        detail:{
            type: Object,
            detail: null
        }
    },
    methods:{
        goDetail(){
            this.$router.push(`/news/${this.detail.id}`)
        }
    }
}
</script>

<style lang="less" scoped>
.newsCard {
    width: 630px;
    height: 85px;
    float: left;
    margin-bottom: 67px;
    cursor: pointer;

    &:nth-child(2n) {
        margin-left: 180px;
    }

    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        margin-right: 40px;

        span {
            display: inline-block;
        }

        .day {
            font-family: PingFang HK;
            font-style: normal;
            font-weight: 500;
            font-size: 60px;
            line-height: 60px;
            display: flex;
            align-items: center;
            color: #333333;
        }

        .date {
            font-family: PingFang HK;
            font-style: normal;
            font-weight: 500;
            font-size: 16px;
            line-height: 16px;
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #333333;

            &::before {
                content: '';
                display: inline-block;
                height: 0;
                width: 50px;
                border-bottom: 1px solid #C4C4C4;
                margin-bottom: 4px;
            }
        }
    }

    .right {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;

        .tit {
            font-size: 22px;
            line-height: 22px;
            display: flex;
            align-items: center;
            color: #333333;
        }

        .dec {
            font-family: PingFang SC;
            font-size: 16px;
            line-height: 24px;
            color: #666666;
            word-break: break-all;
            text-overflow: ellipsis;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
    }
}
</style>
